<template>
  <div class="container">
    <el-card>
      <h3 slot="header">交易明细</h3>
      <el-tabs v-model="activeName" @tab-click="onTabClick">
        <el-tab-pane label="全  部" name="first" />
        <el-tab-pane label="提现记录" name="second" />
        <el-tab-pane label="购买记录" name="third" />
        <el-tab-pane label="回款记录" name="forth" />
      </el-tabs>
      <el-table :data="list" stripe fit>
        <el-table-column prop="payType" :formatter="payTypeFormat" label="记录类型" align="center" />
        <el-table-column prop="receiverName" label="商品名称" align="center" />
        <el-table-column prop="payAmount" label="金额" align="center" />
        <el-table-column prop="modifyTime" :formatter="formatTime" label="日期" align="center" />
        <el-table-column prop="detail" label="详情" align="center" >
          <a>点击查看详情</a>
        </el-table-column>
      </el-table>
      <div class="cc-page">
        <el-pagination
          :total="total"
          :current="current"
          @current-change="onPageChange"
          :current-page.sync="current"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
  import { doVerifyUser } from '@/apis/user';
  import { doOrderList } from '@/apis/order';
  import dayjs from 'dayjs';

  export default {
    name: 'Trade',
    data() {
      return {
        user: undefined,
        activeName: 'first',
        list: [],
        total: 0,
        current: 1
      };
    },
    methods: {
      onTabClick() {},
      async onPageChange() {
        const data = {
          pageSize: 10,
          pageNum: this.current,
          reqJson: '{ status: -1 }'
        };
        const res = await doOrderList(data);
        this.list = res.data.list;
        this.total = res.data.total;
        // debug
        // this.list = [{
        //   payType: 0,
        //   receiverName: '大梨',
        //   payAmount: 16377.75,
        //   modifyTime: '2018-10-30T06:43:49.000+0000',
        //   orderSn: '201809150101000001'
        // }];
        // this.total = 1;
      },
      payTypeFormat(row, column, cellValue, index) {
        switch (cellValue) {
        case 0: return '未支付';
        case 1: return '支付宝';
        case 2: return '微信';
        case 3: return '银行卡';
        default: return '';
        }
      },
      formatTime(row, column, cellValue, index) {
        if (!cellValue) return '';
        return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss');
      }
    },
    async mounted() {
      const token = this.cache.fetchToken();
      if (!token) this.$router.replace('/');
      const ret = await doVerifyUser(token);
      if (!ret) this.$router.replace('/');
      this.user = this.cache.fetchUser();

      await this.onPageChange();
    }
  };
</script>
<style lang="scss" type="text/scss" scoped>
.el-card {
  width: 100%;
}

.el-tabs {
  background-color: #f5f5f5;
  padding: 6px 12px;
}

.el-table {
  margin-top: 30px;
  width: 99%;
}
</style>
